@avatar-size: 100px;
@border-size: 8px;
@space-size: 20px;

.container {
  .transition;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(#000, 0.5);
  visibility: visible;
  opacity: 1;

  &.hide {
    visibility: hidden;
    opacity: 0;
  }
}

.content-wrapper {
  display: flex;
  flex-direction: column;

  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 50vw;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.list-wrapper {
  min-height: 3 * (@avatar-size + 2 * @border-size + @space-size);
  max-height: 60vh;
  overflow: auto;
}

.list {
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  .transition;
  width: @avatar-size;
  height: @avatar-size;
  margin: @space-size @space-size 0;
  border-radius: 50%;
  border: @border-size solid #ccc;
  background: #ccc center/cover border-box no-repeat;
  cursor: pointer;
  opacity: 0.75;

  &:hover {
    opacity: 1;
  }

  &.active {
    opacity: 1;
    border: @border-size solid @theme-color;
  }
}

.item-fixed {
  width: 2 * @border-size + @avatar-size;
  height: 0;
  margin: 0 @space-size;
}

.button-bar {
  padding: @space-size 0;
  text-align: center;
}
